<template>
	<view class="index_box">
		<view class="header_box">
			<view class="buy">买入金额</view>
			<input v-model="money"   class="input" type="number" placeholder="100.00元起购"
				placeholder-style="color: #cccccc;font-size: 48rpx;font-weight: bold;" />
			<view class="title_fen"><text class="fense">03月15日</text>确认份额，开始计算收益</view>
		</view>
		<view class="middle_box">
			<view class="tu_view">
				<view class="first_line">
					<text class="line"></text>
					<text class="txt">只需3步即可赚取收益</text>
					<text class="line"></text>
				</view>
				<view class="tu_box">
					<view class="model">
						<image class="tu" src="../../../../static/funds/xian.png"></image>
						<text>风险评测</text>
					</view>
					<view class="model">
						<image class="tu" src="../../../../static/funds/bang.png"></image>
						<text>绑定银行卡</text>
					</view>
					<view class="model">
						<image class="tu" src="../../../../static/funds/zheng.png"></image>
						<text>上传身份证</text>
					</view>
				</view>
			</view>
			<view class="pay_box">
				<view class="xuan">
					<switch type="checkbox" :checked="$store.state.choose" @change="setChoose" style="transform:scale(0.5);vertical-align: text-top; " />
					<view>基金销售服务由宇宁基金提供，本人已阅读并同意该产品的基金合同,招募说明书，产品规则。信息披露材料及<text
							class="hei">相关协议</text>，充分了解产品的风险特性,并自愿承担相关投资风险。</view>
				</view>
				<view class="btn_pay" @click="showPop">立即购买</view>
				<minpop :show="show_pop" heightSize="425" @close="close">
					<view class="pop_title">
						<text>风险评测</text>
						<image @tap="close" class="close" src="../../../../static/funds/close.png"></image>
					</view>
					<view class="content">根据相关规定我们需要先对您做一个简短的测评来验证你是否能承担投资风险</view>
					<view class="start_btn" @tap="topage">开始评测</view>
				</minpop>
				<minpop :show="show_popBig" heightSize="620" @close="closeBig">
					<view class="box_pop">
						<view class="model_line">
							<text class="left_text">本产品的风险等级</text>
							<view class="line_box">
								<text class="xian active"></text>
								<text class="xian active"></text>
								<text class="xian active"></text>
								<text class="xian"></text>
								<text class="xian"></text>
							</view>
						</view>
						<view class="model_line">
							<text class="left_text">您的投资风格</text>
							<view class="line_box">
								<text class="xian active"></text>
								<text class="xian active"></text>
								<text class="xian"></text>
								<text class="xian"></text>
								<text class="xian"></text>
							</view>
						</view>
						<view class="tit_text">《风险提示函》</view>
						<view class="com_text">依据销售适当性的相关法律法规规定，宏点基金根据投资者分类、产品风险等级或服务分级和适当性匹配结果提供如下适当性匹配意见:</view>
						<view class="com_text" >您购买的基金产品<text class="tit_text">[超出]</text>您本人的风险承受能力,请您阅读并确认本<text class="tit_text">《风险提示函》</text>，并且再次考量您的投资决定。如您仍坚持购买。请点击"确认购买”,点击行为代表您已知悉该基金产品超出您本人的风险承受能力，并且自愿承担可能产生的一切不利后果和损失;同时代表您认可宏点基金及工作人员在销售过程中未主动推介该产品或服务。</view>
					</view>
					<view class="ok_btn" @tap="gopaymentMethod">确认购买</view>
				</minpop>
			</view>
		</view>
	</view>
</template>

<script>
	import minpop from "../../../../components/min-popup/min-popup.vue"
	export default {
		components: {
			minpop
		},
		data() {
			return {
				show_pop: false,
			}
		},
		computed:{
			money:{
				set(val){
					this.$store.commit("CHANG_MONEY",val);
						console.log(this.$store.state.money);
				},
				get(){
					return this.$store.state.money;
				}
			},
			show_popBig(){
				return this.$store.state.okPay;
			}
		},
		methods: {
			setChoose(event){
				this.$store.commit("CHANG_CHOOSE",event.detail.value);	
			},
			showPop() {
				const level = uni.getStorageSync('level');
				if(this.$store.state.choose&&this.$store.state.money!=""){
					if(level){
						this.$store.state.okPay=true;
					}else{
						this.show_pop = true
					}
				}else{
					uni.showToast({
					    title: '信息未完成',
					    duration: 1000,
						icon:"error"
					});
				}
			
			},
			close() {
				this.show_pop = false
			},
			topage() {
				this.show_pop=false;
				uni.navigateTo({
					url: "../research/research"
				})
			},
			closeBig() {
				this.$store.commit("CHANG_OKPAY",false);	
			},
			gopaymentMethod(){
			this.$store.commit("CHANG_CHOOSE",false);		
			this.$store.commit("CHANG_CHOOSEFX",false);		
			this.$store.commit("CHANG_OKPAY",false);		
			uni.navigateTo({
				url:'../paymentMethod/paymentMethod'
			})
			
			}
		}
	}
</script>

<style scoped lang="scss">
	.index_box {
		width: 750rpx;
		height: 100vh;
		background-color: #f5f5f5;
		.header_box {
			height: 300rpx;
			box-sizing: border-box;
			padding-left: 24rpx;
			padding-right: 24rpx;
			padding-top: 30rpx;
			background-color: white;

			.buy {
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 30rpx;
			}

			.input {
				box-sizing: border-box;
				margin-bottom: 40rpx;
				border: 1rpx solid #f9f9f9;
				height: 70rpx;
				border-radius: 8rpx;
			}

			.title_fen {
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 5rpx;
				box-sizing: border-box;
				padding-left: 24rpx;
				font-size: 28rpx;
				color: #666666;
				background-color: #fff1ec;

				.fense {
					color: #ff7846;
				}
			}

		}

		.middle_box {
			height: calc(100vh - 300rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.tu_view {
				height: 180rpx;
				box-sizing: border-box;
				padding-top: 25rpx;
				padding-left: 80rpx;
				padding-right: 80rpx;

				.first_line {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666666;
					align-items: center;
					margin-bottom: 25rpx;

					.line {
						width: 140rpx;
						height: 1rpx;
						background-color: #cccccc;
					}
				}

				.tu_box { 
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					.model {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: #666666;

						.tu {
							height: 50rpx;
							width: 70rpx;
							margin-bottom: 10rpx;
						}
					}
				}

			}

			.pay_box {
				.xuan {
					display: flex;
					justify-content: space-between;
					color: #666666;
					font-size: 24rpx;
					align-items: flex-start;
					box-sizing: border-box;
					padding-left: 20rpx;
					padding-right: 20rpx;
					line-height: 36rpx;

					.hei {
						color: black;
					}

					.xuan_btn {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.btn_pay {
					height: 80rpx;
					background-color: $uni-global-color-theme;
					color: white;
					font-size: 28rpx;
					line-height: 80rpx;
					text-align: center;
					margin-top: 60rpx;
					margin-bottom: 80rpx;
				}
			}

		}

		.pop_title {
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			box-sizing: border-box;
			padding-top: 40rpx;
			padding-left: 38rpx;
			padding-right: 38rpx;
			margin-bottom: 40rpx;
			position: relative;

			.close {
				width: 30rpx;
				height: 28rpx;
				position: absolute;
				right: 38rpx;
				bottom: 0rpx;
			}
		}

		.content {
			box-sizing: border-box;
			padding-top: 40rpx;
			padding-left: 38rpx;
			padding-right: 38rpx;
			border-top: 1rpx solid #f9f9f9;
			font-size: 24rpx;
			color: #999999;
		}

		.start_btn {
			width: 416rpx;
			height: 88rpx;
			background-color: $uni-global-color-theme;
			color: white;
			line-height: 88rpx;
			font-size: 24rpx;
			text-align: center;
			border-radius: 5rpx;
			margin: 75rpx auto;
		}

		//第二个pop
		.box_pop {
			box-sizing: border-box;
			padding-left: 25rpx;
			padding-right: 38rpx;
			.model_line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 30rpx;
				margin-top: 30rpx;
				.left_text{
					font-size: 24rpx;
					color: #999999;
				}
				.line_box{
						height: 30rpx;
						display: flex;
						align-items: center;
						.xian{
							display: inline-block;
							width: 58rpx;
							height: 5rpx;
		 					background-color: #cfcfcf;
							margin-right: 2rpx;
						}
						.active{
							background-color: $uni-global-color-theme;
						}
					}
				
			}
				.tit_text{
					font-size: 24rpx;
					color: #333333;
					text-align: center;
					margin-top: 35rpx;
				}
				.com_text{
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;
					
				}
				
				
		}
		
		.ok_btn{
			background-color: $uni-global-color-theme;
			text-align: center;
			height: 86rpx;
			line-height: 70rpx;
			color: #ffffff;
			font-size: 28rpx; 
			margin-top: 28rpx;
		}

	}
</style>
